'use client'
import { pipeline, env } from '@xenova/transformers'
import { useState } from 'react'
import { Input, Button, Spin } from 'antd'
env.allowLocalModels = false

// Allocate a pipeline for sentiment-analysis
// let pipe = await pipeline('sentiment-analysis')
// let out = await pipe('I love transformers!')
// let pipe = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment')
// [{'label': 'POSITIVE', 'score': 0.999817686}]

export default function Home({ Children }) {
  const [text, setText] = useState('')
  const [pipeAnswer, setPipeAnswer] = useState('')
  const [loading, setLoading] = useState(false)
  const usePipe = async () => {
    setLoading(true)
    let pipe = await pipeline('sentiment-analysis')
    let out = await pipe(text)
    console.log(out[0].label, 'out')
    setLoading(false)
    setPipeAnswer(out[0].label)
  }
  return (
    <div className="w-300px h-300px m-auto mt-300px text-center">
      情感分析AI模型训练
      <br />
      能根据你的问题判断是否积极与否
      <Spin spinning={loading}>
        <Input placeholder="Enter text" className="mt-20px!" onChange={(e) => setText(e.target.value)} />
        <Button type="primary" danger className="m-auto mt-20px!" onClick={usePipe}>
          查询
        </Button>
      </Spin>
      <p className="mt-20px!">
        {pipeAnswer === 'POSITIVE' ? '积极的' : pipeAnswer === 'NEGATIVE' ? '消极的' : '请查询 ···'}
      </p>
      {Children}
    </div>
  )
}
